<script setup>
import randomInteger from 'random-int'
import { reactive, ref } from 'vue'

const student = reactive({
  name: 'Hina',
  age: 17,
  gender: '女'
})

const num = ref(randomInteger(15, 60))

const handleClick = () => {
  num.value = randomInteger(15, 60)
}
</script>

<template>
  <div>
    <div>{{ student.name }}</div>
    <div>{{ student.age }}</div>
    <div :class="student.gender === '女' ? 'text-red-500' : 'text-blue-500'">{{ student.gender }}</div>
    <div>{{ num }} - 15 = {{ num - 15 }}</div>
    <button class="border-2 border-amber-300" @click="handleClick">click</button>
  </div>
</template>
